<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 3</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
    // Vue.createApp({
    //     data(){
    //         return{
    //             list:['hello','world','dell','lee'],
    //         }
    //     },
    //     // 通过v-for来循环list里面的数据   item代表list数组的里面的每一个数据   index代表list数组的里面的每一个数据的下标
    //     template:`
    //         <ul>
    //             <li v-for="(item,index) in list">{{item}} {{index}}</li>    
    //         </ul>
    //     `
    // }).mount('#root')


    // // 点击按钮将input框的内容追加到list数组中
    // Vue.createApp({
    //     data(){
    //         return{
    //             list:[],
    //             inputValue:'',
    //         }
    //     },
    //     methods:{
    //         handleAddItem(){
    //             // 使用push方法每一次点击按钮时将input框的内容追加到list数组中
    //             this.list.push(this.inputValue);
    //             this.inputValue="";   // 每添加一次将input框清空
    //         }
    //     },
    //     // 使用v-model给input框进行数据双向绑定   将inputValue的值和input框的值进行绑定
    //     template:`
    //     <div>
    //         <input v-model="inputValue" />
    //         <button v-on:click="handleAddItem">增加</button>
    //         <ul>
    //             <li v-for="(item,index) in list">{{item}}  {{index}}</li>    
    //         </ul>
    //     </div>
    //     `
    // }).mount('#root')
</script>